<template>
    <div id="app">
        <div id="menu">
            <button class="setting-icon" @click="$router.push({name: 'index'})">
                <Icon size="20" color="#999" type="md-home" />
            </button>
            <button class="setting-icon">
                <Icon size="20" color="#999" type="md-settings" />
            </button>
        </div>
        <div class="_right-router">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'dev_tool',
    };
</script>

<style lang="scss">
    html, body{
        width: 100%;
        height: 100%;
    }
    #app{
        display: flex;
        flex-direction: row;
        height: 100%;
        ._right-router{
            flex: 1;
            height: 100%;
            overflow-y: auto;
        }
    }
    #menu{
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        width: 70px;
        height: 100%;
        padding: 20px 0;
        box-sizing: border-box;
        background: #212121;
        .setting-icon{
            width: 100%;
            height: 50px;
            border: 0;
            background: transparent;
            cursor: pointer;
        }
        .setting-icon>i{
            transition: all 0.25s;
        }
        .setting-icon:hover>i{
            color: #eee !important;
        }
    }
</style>
